M
MLOG
React Lazy Loading: Komponent kodini bo'lish orqali samaradorlikni oshirish | MLOG | MLOG}> ); } export default App;

Ushbu misolda Home, About va Contact komponentlari "yalqov" usulda yuklanadi. Foydalanuvchi maʼlum bir marshrutga oʻtganda, tegishli komponent asinxron ravishda yuklanadi. Suspense komponenti esa komponent olinayotganda yuklanish indikatori koʻrsatilishini taʼminlaydi.

Ilg'or usullar va mulohazalar

Xatolik Chegaralari (Error Boundaries)

Xatolik chegaralari (Error Boundaries) - bu oʻzining farzand komponentlari daraxtining istalgan joyida JavaScript xatolarini ushlaydigan, bu xatolarni jurnalga yozadigan va ishdan chiqqan komponent daraxti oʻrniga zaxira interfeysini koʻrsatadigan React komponentlaridir. Siz ulardan "yalqov" usulda yuklanadigan komponentlarni yuklash paytida yuzaga kelishi mumkin boʻlgan xatoliklarni toʻgʻri boshqarish uchun foydalanishingiz mumkin.


import React, { lazy, Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    
      Loading...}>
        
      
    
  );
}

export default App;

Ushbu misolda ErrorBoundary komponenti Suspense komponentini oʻrab turibdi. Agar MyComponentni yuklash yoki render qilish paytida xatolik yuzaga kelsa, ErrorBoundary xatoni ushlab oladi va zaxira interfeysini koʻrsatadi.

Lazy Loading uchun eng yaxshi amaliyotlar

Turli sohalardagi misollar

React lazy loading va kodni bo'lishning afzalliklari turli sohalarga taalluqlidir. Mana bir nechta misollar:

React.lazy va Suspense'dan tashqari

React.lazy va Suspense "yalqov" yuklashni amalga oshirishning oddiy usulini taqdim etsa-da, boshqa kutubxonalar va texnikalar yanada ilgʻor xususiyatlar va nazoratni taklif qilishi mumkin:

Xulosa

Komponent kodini boʻlish bilan React lazy loading – bu React ilovalaringiz samaradorligini optimallashtirish uchun kuchli usuldir. Komponentlarni talab boʻyicha yuklash orqali siz dastlabki yuklanish vaqtlarini sezilarli darajada qisqartirishingiz, foydalanuvchi tajribasini yaxshilashingiz va resurs sarfini kamaytirishingiz mumkin. React.lazy va Suspense'dan foydalanib, siz React loyihalaringizda "yalqov" yuklashni osongina amalga oshirishingiz va tezroq, sezgirroq veb-ilovalar yaratishingiz mumkin. Foydalanuvchiga uzluksiz tajriba taqdim etish uchun xatoliklarni boshqarish, yuklanish indikatorlari va boshqa ilgʻor texnikalarni hisobga olishni unutmang. Ilovangizning samaradorligini doimiy ravishda kuzatib boring va optimal natijalarga erishish uchun kodni boʻlish strategiyangizni takomillashtiring.

"Yalqov" yuklash kuchini qabul qiling va tezroq, samaraliroq va foydalanuvchiga qulayroq veb-ilova yaratish imkoniyatini oching.